<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 800px;
        }

        table th,
        td {
            border: 1px solid black;
            text-align: center;
        }

        .insertDiv {
            position: fixed;
            margin-left: -400px;
            margin-top: -300px;
            top: 50%;
            left: 50%;
            width: 600px;
            height: 400px;
            background-color: white;
            box-shadow: 0 0 30px;
        }

        .insertDivWrap-top {
            height: 50px;
            background-color: gray;
            border-bottom: 1px solid black;
        }

        .insertDivWrap-top .Title {
            display: inline-block;
            margin-left: 15px;
            margin-top: 15px;
        }

        .insertDivWrap-top .close {
            width: 50px;
            margin-top: 15px;
            color: black;
            text-align: center;
            text-decoration: none;
            float: right;
            cursor: pointer;
        }

        .insertDivWrap-Content {
            padding: 16px;
        }

        .insertDivWrap-Content span {
            display: inline-block;
            width: 80px;
            margin: 4px;
        }
    </style>
</head>

<body>

    <div id="app">
        标题：<input type="text" v-model="selectTxt">
        <br>
        <button @click="closeInsertBtn = true">添加</button>
        <table>
            <tr>
                <th>Id</th>
                <th>标题</th>
                <th>分类</th>
                <th>创建时间</th>
                <th>浏览量</th>
                <th>点赞数</th>
                <th>是否置顶</th>
                <th>操作</th>
            </tr>
            <tr v-for="item in fillTitle">
                <td>{{item.Id}}</td>
                <td>{{item.Title}}</td>
                <td>{{item.ClassFication}}</td>
                <td>{{item.TimeCreate}}</td>
                <td>{{item.LookCount}}</td>
                <td>{{item.LikeCount}}</td>
                <td>{{item.IsTop?'是':'否'}}</td>
                <td>
                    <button @click="Edit(item)">编辑</button>
                    &nbsp;
                    <button @click="Delete(item.Id)">删除</button>
                </td>
            </tr>
            <!-- 查无记录 -->

            <tr v-if="fillTitle.length == 0">
                <td colspan="8">查无记录</td>
            </tr>
        </table>


        <!-- 添加博客弹窗 -->
        <div class="insertDiv" v-if="closeInsertBtn">
            <div class="insertDivWrap-top">
                <div class="Title">添加博客</div>
                <a class="close" @click="closeInsertBtn = false">X</a>
            </div>
            <div class="insertDivWrap-Content">
                <span>编号：</span>
                <input type="text" v-model="newId"><br>
                <span>标题：</span>
                <input type="text" v-model="newTitle"><br>
                <span>分类：</span>
                <select v-model="newFication">
                    <option>HTML5</option>
                    <option>CSS3</option>
                    <option>ES6</option>
                    <option>JAVA</option>
                    <option>.NET</option>
                </select><br>
                <span>创建时间：</span>
                <input type="text" v-model="newTimeCreate"><br>
                <span>浏览量：</span>
                <input type="text" v-model="newLookCount"><br>
                <span>点赞数：</span>
                <input type="text" v-model="newLikeCount"><br>
                <span>是否置顶：</span>
                <input type="radio" name="isTop" id="rd1" :value="true" v-model="newIsTop">
                <label for="rd1">是</label>
                <input type="radio" name="isTop" id="rd2" :value="false" v-model="newIsTop">
                <label for="rd2">否</label>
                <br>
                <br>
                <button @click="Save">保存</button>


            </div>
        </div>

        <!-- 编辑博客弹窗 -->
        <div class="insertDiv" v-if="editCloseBtn">
            <div class="insertDivWrap-top">
                <div class="Title">编辑博客</div>
                <a class="close" @click="editCloseBtn = false">X</a>
            </div>
            <div class="insertDivWrap-Content">
                <span>编号：</span>
                <!-- disabled 不允许修改 -->
                <input type="text" v-model="oldId" disabled><br>
                <span>标题：</span>
                <input type="text" v-model="oldTitle"><br>
                <span>分类：</span>
                <select v-model="oldFication">
                    <option>HTML5</option>
                    <option>CSS3</option>
                    <option>ES6</option>
                    <option>JAVA</option>
                    <option>.NET</option>
                </select><br>
                <span>创建时间：</span>
                <input type="text" v-model="oldTimeCreate"><br>
                <span>浏览量：</span>
                <input type="text" v-model="oldLookCount"><br>
                <span>点赞数：</span>
                <input type="text" v-model="oldLikeCount"><br>
                <span>是否置顶：</span>
                <input type="radio" name="isTop" id="rd1" :value="true" v-model="oldIsTop">
                <label for="rd1">是</label>
                <input type="radio" name="isTop" id="rd2" :value="false" v-model="oldIsTop">
                <label for="rd2">否</label>
                <br>
                <br>
                <button @click="Preserve">保存</button>


            </div>
        </div>

    </div>
    <script src="js/vue.js"></script>

    <script>

        let app = Vue.createApp({
            data() {
                return {
                    // 控制编辑窗口的弹窗
                    editCloseBtn: false,
                    // 得到旧的值
                    oldId: '',
                    oldTitle: '',
                    oldFication: '',
                    oldTimeCreate: '',
                    oldLookCount: '',
                    oldLikeCount: '',
                    oldIsTop: '',
                    // 添加的新值
                    newId: '',
                    newTitle: '',
                    newFication: '',
                    newTimeCreate: '',
                    newLookCount: '',
                    newLikeCount: '',
                    newIsTop: '',
                    // 打开关闭添加窗口(控制添加窗口的弹窗)
                    closeInsertBtn: false,
                    // 搜索框里面的内容
                    selectTxt: '',
                    lists: [
                        {
                            Id: 1,
                            Title: '标题1',
                            // 分类
                            ClassFication: 'HTML5',
                            // 创建时间
                            TimeCreate: '2023-4-6 17:27:00',
                            // 浏览量
                            LookCount: 122,
                            // 点赞数
                            LikeCount: 1,
                            // 是否置顶
                            IsTop: true
                        },
                        {
                            Id: 2,
                            Title: '标题2',
                            // 分类
                            ClassFication: 'HTML5',
                            // 创建时间
                            TimeCreate: '2023-4-6 17:27:00',
                            // 浏览量
                            LookCount: 50,
                            // 点赞数
                            LikeCount: 5,
                            // 是否置顶
                            IsTop: true
                        },
                        {
                            Id: 3,
                            Title: '标题3',
                            // 分类
                            ClassFication: 'CSS3',
                            // 创建时间
                            TimeCreate: '2023-4-6 17:27:00',
                            // 浏览量
                            LookCount: 1000,
                            // 点赞数
                            LikeCount: 12,
                            // 是否置顶
                            IsTop: true
                        },
                        {
                            Id: 4,
                            Title: '标题4',
                            // 分类
                            ClassFication: 'HTML5',
                            // 创建时间
                            TimeCreate: '2023-4-6 17:27:00',
                            // 浏览量
                            LookCount: 200,
                            // 点赞数
                            LikeCount: 5,
                            // 是否置顶
                            IsTop: false
                        },
                        {
                            Id: 5,
                            Title: '标题5',
                            // 分类
                            ClassFication: 'HTML5',
                            // 创建时间
                            TimeCreate: '2023-4-6 17:27:00',
                            // 浏览量
                            LookCount: 200,
                            // 点赞数
                            LikeCount: 1,
                            // 是否置顶
                            IsTop: true
                        }
                    ]
                }
            },
            // 计算属性
            computed: {
                fillTitle() {
                    let tmp = [];
                    for (let i = 0; i < this.lists.length; i++) {
                        // 用一个变量，接受符合条件的查询结果
                        let blog = this.lists[i];
                        if (blog.Title.includes(this.selectTxt)) {
                            tmp.push(blog);
                        }
                    }
                    return tmp;
                },
            },
            // 方法
            methods: {
                // 添加
                Save() {
                    console.log(this.newId);
                    console.log(this.newTitle);
                    console.log(this.newFication);
                    console.log(this.newTimeCreate);
                    console.log(this.newLookCount);
                    console.log(this.newLikeCount);
                    console.log(this.newIsTop);

                    this.lists.push({
                        Id: this.newId,
                        // 标题
                        Title: this.newTitle,
                        // 分类
                        ClassFication: this.newFication,
                        // 创建时间
                        TimeCreate: this.newTimeCreate,
                        // 浏览量
                        LookCount: this.newLookCount,
                        // 点赞数
                        LikeCount: this.newLikeCount,
                        // 是否置顶
                        IsTop: this.newIsTop
                    })

                    // 关闭弹窗
                    this.closeInsertBtn = false;

                    // 清空数据
                    this.newId = '';
                    this.newTitle = '';
                    this.newFication = '';
                    this.newTimeCreate = '';
                    this.newLookCount = '';
                    this.newLikeCount = '';
                    this.newIsTop = '';

                },
                // 删除
                Delete(id) {
                    for (let i = 0; i < this.lists.length; i++) {
                        if (this.lists[i].Id == id) {
                            this.lists.splice(i, 1);
                            return;
                        }
                    }
                },
                // 编辑
                Edit(blog) {
                    // 显示弹窗
                    this.editCloseBtn = true;

                    this.oldId = blog.Id;
                    this.oldTitle = blog.Title;
                    this.oldFication = blog.ClassFication;
                    this.oldTimeCreate = blog.TimeCreate;
                    this.oldLookCount = blog.LookCount;
                    this.oldLikeCount = blog.LikeCount;
                    this.oldIsTop = blog.IsTop;
                },
                // 保存编辑后的数据
                Preserve() {
                    // 找出编辑的博客记录，完成添加
                    for (let i = 0; i < this.lists.length; i++) {
                        let tmpBlog = this.lists[i];
                        // 通过id来找到需要更改的博客
                        if (tmpBlog.Id == this.oldId) {
                            tmpBlog.Id = this.oldId;
                            tmpBlog.Title = this.oldTitle;
                            tmpBlog.ClassFication = this.oldFication;
                            tmpBlog.TimeCreate = this.oldTimeCreate;
                            tmpBlog.LookCount = this.oldLookCount;
                            tmpBlog.LikeCount = this.oldLikeCount;
                            tmpBlog.IsTop = this.oldIsTop;

                            // 关闭弹窗
                            this.editCloseBtn = false;
                            return;
                        }
                    }
                },

            }
        }).mount('#app')

    </script>
</body>

</html>